<template>
  <div>
    <div style="background-color: #fff; height: 100px">
      优惠券名称：<el-input
        v-model="input"
        style="width: 240px"
        placeholder="请输入内容"
      />
      活动状态：<el-select
        v-model="isshow"
        placeholder="请选择活动状态"
        style="width: 240px"
      >
        <el-option label="全部" value="全部" />
        <el-option label="进行中" value="进行中" />
        <el-option label="已结束" value="已结束" />
      </el-select>
      上线状态：<el-select
        v-model="flag"
        placeholder="请选择上线状态"
        style="width: 240px"
      >
        <el-option label="全部" value="全部" />
        <el-option label="上线" value="上线" />
        <el-option label="下线" value="下线" />
      </el-select>
      <div style="margin-top: 20px">
        <el-button @click="search">检索</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="add">新增优惠券</el-button>
      </div>
    </div>
    <div style="margin-top: 20px; background-color: #fff; height: 400px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="优惠券名称" width="150" />
        <el-table-column prop="type" label="优惠券类型" width="150" />
        <el-table-column prop="shiyong" label="可使用商品" width="150" />
        <el-table-column prop="men" label="使用门槛" width="150" />
        <el-table-column prop="mian" label="面值" width="150" />
        <el-table-column
          prop="time"
          label="有效期"
          :formatter="dateFormat"
          width="200"
        />
        <el-table-column prop="dian" label="状态" width="150">
          <template v-slot="scope">
            {{ scope.row.flag ? "未过期" : "已过期" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template v-slot="scope">
            <el-button link type="primary" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button link type="primary" @click="changeFlag(scope.row._id)">{{
              scope.row.flag ? "已过期" : "未过期"
            }}</el-button>
            <el-button link type="primary" @click="del(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="10" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="新建优惠券" width="500">
      <el-form :model="form">
        <el-form-item label="优惠券名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="优惠券类型" :label-width="formLabelWidth">
          <el-input v-model="form.type" autocomplete="off" />
        </el-form-item>
        <el-form-item label="可使用商品" :label-width="formLabelWidth">
          <el-input v-model="form.shiyong" autocomplete="off" />
        </el-form-item>
        <el-form-item label="使用门槛" :label-width="formLabelWidth">
          <el-input v-model="form.men" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面值" :label-width="formLabelWidth">
          <el-input v-model="form.mian" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="form.flag" name="yong" :value="true"
            >未过期</el-radio
          >
          <el-radio v-model="form.flag" name="yong" :value="false"
            >已过期</el-radio
          >
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.time"
            type="date"
            placeholder="请选择时间"
            style="width: 400px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogFormVisible1" title="修改优惠券" width="500">
      <el-form :model="form1">
        <el-form-item label="优惠券名称" :label-width="formLabelWidth">
          <el-input v-model="form1.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="优惠券类型" :label-width="formLabelWidth">
          <el-input v-model="form1.type" autocomplete="off" />
        </el-form-item>
        <el-form-item label="可使用商品" :label-width="formLabelWidth">
          <el-input v-model="form1.shiyong" autocomplete="off" />
        </el-form-item>
        <el-form-item label="使用门槛" :label-width="formLabelWidth">
          <el-input v-model="form1.men" autocomplete="off" />
        </el-form-item>
        <el-form-item label="面值" :label-width="formLabelWidth">
          <el-input v-model="form1.mian" autocomplete="off" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="form1.flag" name="yong" :value="true"
            >未过期</el-radio
          >
          <el-radio v-model="form1.flag" name="yong" :value="false"
            >已过期</el-radio
          >
        </el-form-item>
        <el-form-item label="时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form1.time"
            type="date"
            placeholder="请选择时间"
            style="width: 400px"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取消</el-button>
          <el-button type="primary" @click="handleEdit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref, reactive } from "vue";
const input = ref("");
const isshow = ref("");
const flag = ref("");
const tableData = ref([]);
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  name: "",
  type: "",
  shiyong: "",
  men: "",
  mian: "",
  time: "",
  flag: "",
});
let form1 = reactive({
  name: "",
  type: "",
  shiyong: "",
  men: "",
  mian: "",
  time: "",
  flag: "",
  _id: "",
});
const getlist = async () => {
  let res = await axios.get("http://localhost:3000/zjm/discounts");
  tableData.value = res.data.list;
  console.log(res.data.list);
};
const add = async () => {
  dialogFormVisible.value = true;
};
const handleAdd = async () => {
  let res = await axios.post("http://localhost:3000/zjm/adddiscounts", form);
  console.log(res);
  getlist();
  form.name = "";
  form.type = "";
  form.shiyong = "";
  form.men = "";
  form.mian = "";
  form.time = "";
  form.flag = "";
  dialogFormVisible.value = false;
};
const edit = async (row: any) => {
  dialogFormVisible1.value = true;
  form1.name = row.name;
  form1.type = row.type;
  form1.time = row.time;
  form1.shiyong = row.shiyong;
  form1.men = row.men;
  form1.mian = row.mian;
  form1.flag = row.flag;
  form1._id = row._id;
};

const handleEdit = async () => {
  let res = await axios.post("http://localhost:3000/zjm/editdiscounts", form1);
  console.log(res.data, form1);

  getlist();
  dialogFormVisible1.value = false;
};

const dateFormat = (row, column, cellValue, index) => {
  const daterc = row[column.property];
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始，11结束，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return (
      year +
      "-" +
      month +
      "-" +
      day +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  }
};
const search = () => {
  tableData.value = tableData.value.filter((item) =>
    item.name.includes(input.value)
  );
  input.value = "";
};

const reset = () => {
  input.value = "";
};
const del = async (id: any) => {
  await axios
    .post(`http://localhost:3000/zjm/deldiscounts`, { _id: id })
    .then((res) => {
      getlist();
    });
};
const changeFlag = async (id: string) => {
  let data = {
    _id: id,
  };
  await axios.post("http://localhost:3000/zjm/shangxia4", data).then((res) => {
    getlist();
  });
};
onMounted(() => {
  getlist();
});
</script>

<style scoped>
</style>